<template>
  <div>
    <!-- 商品详情顶部导航区 -->
    <nav-comp :back="true" title="商品详情"></nav-comp>
    <!-- 商品详情数据区域 -->
    <img :src="$pre + goodDesc.img" class="banner" />
    <hr />
    <p>商品名称：{{ goodDesc.goodsname }}</p>
    <p>商品价格：{{ goodDesc.price }}</p>
    <!-- 商品底部导航 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <van-goods-action-icon icon="cart-o" text="购物车" :badge="cartNum" 
      @click="goCart"
      />
      <van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="changeSku"
      />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
    <!-- 商品sku列表 -->
    <van-sku
      v-model="show"
      :sku="sku"
      :goods="goods"
      :goods-id="goodDesc.id"
      @add-cart="onAddCartClicked"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      goodDesc: {}, //商品详情数据
      show: false, //控制sku列表是否显示
      goods: {}, //商品缩略图数据
      cartNum: "", //购物车商品数量
      sku: {
        // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
        // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
        tree: [
          {
            k: "颜色", // skuKeyName：规格类目名称
            k_s: "s1", // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
            v: [
              {
                id: "1", // skuValueId：规格值 id
                name: "蓝色", // skuValueName：规格值名称
                imgUrl:
                  "https://img14.360buyimg.com/n0/jfs/t1/195251/28/503/70907/608a8bc4E87eaf1ae/9aa39ad669ed7f39.jpg", // 规格类目图片，只有第一个规格类目可以定义图片
                previewImgUrl:
                  "https://img14.360buyimg.com/n0/jfs/t1/195251/28/503/70907/608a8bc4E87eaf1ae/9aa39ad669ed7f39.jpg", // 用于预览显示的规格类目图片
              },
              {
                id: "2",
                name: "粉色",
                imgUrl:
                  "https://img14.360buyimg.com/n0/jfs/t1/131776/9/23287/325305/621f295fE9dc6a3ce/117b4d1ed262266a.jpg",
                previewImgUrl:
                  "https://img14.360buyimg.com/n0/jfs/t1/131776/9/23287/325305/621f295fE9dc6a3ce/117b4d1ed262266a.jpg",
              },
            ],
            largeImageMode: true, //  是否展示大图模式
          },
          {
            k: "内存",
            k_s: "s2",
            v: [
              {
                id: "1", // skuValueId：规格值 id
                name: "4G", // skuValueName：规格值名称
              },
              {
                id: "2", // skuValueId：规格值 id
                name: "8G", // skuValueName：规格值名称
              },
            ],
          },
        ],
        // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
        list: [
          {
            id: 2259, // skuId
            s1: "1", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "1",
            price: 200000, // 价格（单位分）
            stock_num: 110, // 当前 sku 组合对应的库存
          },
          {
            id: 2260, // skuId
            s1: "2", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "2",
            price: 300000, // 价格（单位分）
            stock_num: 60, // 当前 sku 组合对应的库存
          },
          {
            id: 2261, // skuId
            s1: "1", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "2",
            price: 320000, // 价格（单位分）
            stock_num: 30, // 当前 sku 组合对应的库存
          },
          {
            id: 2261, // skuId
            s1: "2", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "1",
            price: 280000, // 价格（单位分）
            stock_num: 200, // 当前 sku 组合对应的库存
          },
        ],
        price: "1999", // 默认价格（单位元）
        stock_num: 227, // 商品总库存
      },
    };
  },
  mounted() {
    //1.获取商品的详情数据
    this.getDesc(this.$route.query.id);
  },
  methods: {
    //1.获取商品的详情数据
    getDesc(id) {
      this.$api
        .reqGoodDesc({ id })
        .then((res) => {
          //1.1赋值页面数据
          this.goodDesc = res.data.list[0];
          //1.2设置sku裂变默认展示的缩略图
          this.goods = {picture:this.$pre+this.goodDesc.img}
        })
        .catch((err) => console.log(err));
    },

    //2.添加购物车
    onAddCartClicked(info){
        //2.1解构获取商品信息
        let {goodsId,selectedNum} = info
        //2.2检测是否登录
        let userUid =this.$api.isLogin(this.$route.path)
        //2.3根据返回检测结果判断是否执行添加
        if(userUid!=false){
            this.$api.reqCartAdd({uid:userUid,goodsid:goodsId,num:selectedNum})
            .then(res=>{
                //2.4提示用户添加成功
                this.$toast('添加成功')
                //2.5显示目前购物车商品数量 统计商品种类数量
                this.cartNum = res.data.list.cartCount
                //2.6关闭sku弹窗
                this.show = false
            })
            .catch(err=>console.log(err))
        }
    },


    //3.显示sku弹窗列表
    changeSku(){
        this.show = true
    },
    //4.跳转到购物车页面
    goCart(){
        this.$router.push('/cart')
    }
  },
};
</script>

<style scoped>
.banner {
  width: 100%;
}

p {
  font-size: 0.3rem;
}
</style>
